<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .header {
            display: flex;
            height: 50px;
            width: 100%;
            justify-content: space-between;
        }

        .header-left {
            display: flex;
        }

        .header-left li {
            color: #222222;
            font-size: 13px;
            padding: 15px;
        }

        .header-right {
            padding: 10px;
        }

        .header-right button:first-child {
            border: none;
            border-radius: 10px;
            outline: none;
            background: white;
            padding: 5px;
            margin-left: 15px;
        }

        .header-right button:last-child {
            border: none;
            background: #4171f2;
            border-radius: 8px;
            outline: none;
            color: #fff;
            padding: 4px 10px;
            margin-left: 15px;
        }

        .logo {
            width: 270px;
            height: 130px;
            padding-bottom: 10px;
            margin: 0 auto;
        }

        .logo img {
            width: 100%;
            height: 100%;
        }

        .search-box {
            position: relative;
            width: 650px;
            height: 45px;
            margin: 0 auto;
        }

        .search-box input {
            width: 500px;
            height: 45px;
            border: 2px solid #ddd;
            padding: 0;
            box-sizing: border-box;
            outline: none;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            border-right: none;
        }

        .search-box button {
            width: 150px;
            position: absolute;
            top: 0;
            right: 0;
            border: none;
            background: #4e6ef2;
            height: 45px;
            color: #fff;
            font-size: 20px;
            border-top-right-radius: 10px;
            border-bottom-right-radius: 10px;
            outline: none;
        }

        .icon {
            width: 24px;
            height: 20px;
            background-image: url('./images/icon.png');
            background-repeat: no-repeat;
            background-position: 0 -50px;
            position: absolute;
            top: 50%;
            right: 170px;
            margin-top: -10px;
        }

        .icon:hover {
            background-position: 0 -74px;
        }

        .title-icon {
            width: 24px;
            height: 20px;
            position: absolute;
            left: -26px;
            top: 12px;
            margin-top: -10px;
            background-image: url('./images/000.jpg');
            background-repeat: no-repeat;
            background-position: -2px -5px;
        }

        .new-list {
            width: 700px;
            margin: 0 auto;
        }

        .new-list .title {
            margin-top: 40px;
            display: flex;
            font-size: 14px;
            padding: 0 30px;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }

        .title span:first-child {
            font-size: 14px;
            color: #222222;
        }

        .title span:last-child {
            position: relative;
            margin-right: 50px;
            color: #9195a3;
        }

        .new-list .list {
            display: flex;
            width: 100%;
            /* margin-top: 20px; */
            margin-left: 30px;
            flex-wrap: wrap;
            align-items: center;
        }

        .new-list .list li {
            width: 50%;
            font-size: 14px;
            color: #222222;
            justify-content: space-around;
            margin: 10px 0;
        }

        .first-child-span {
            padding: 0 2px;
            color: white;
            padding: 1px 4px;
            background: #ff455b;
            border-radius: 7px;
        }

        .last-child-span {
            padding: 0 2px;
            color: white;
            padding: 1px 4px;
            background: #ff9812;
            border-radius: 7px;
        }

        .new-list .list li:nth-child(1) span {
            color: red;
        }

        .new-list .list li:nth-child(2) span {
            color: #ff6600;
        }

        .new-list .list li:nth-child(3) span {
            color: #faa90e;
        }
    </style>
</head>

<body>
    <!-- header -->
    <div class="header">
        <ul class="header-left">
            <li>新闻</li>
            <li>hao123</li>
            <li>地图</li>
            <li>视频</li>
            <li>贴吧</li>
            <li>学术</li>
            <li>更多</li>
        </ul>

        <div class="header-right">
            <button>设置</button>
            <button>登录</button>
        </div>
    </div>
    <!-- logo -->
    <div class="logo">
        <img src="../html/images/baidu.png" alt="">
    </div>
    <!-- input -->
    <div class="search-box">
        <input type="text">
        <button>百度一下</button>
        <div class="icon"></div>
    </div>
    <!-- newlist -->
    <div class="new-list">
        <div class="title">
            <span>百度热榜</span>
            <span>
                <div class="title-icon"></div>换一换
            </span>
        </div>

        <ul class="list">
            <li>
                <span>1</span>
                吴尊友:普通人不用着急打疫苗<span style="color: white;" class="last-child-span">热</span>
            </li>
            <li>
                <span>2</span>
                金正恩参谒志愿军烈士陵园<span style="color: white;" class="first-child-span">新</span>
            </li>
            <li>
                <span>3</span>
                四川绵阳市北川县发生4.7级地震
            </li>
            <li>
                <span>4</span>
                老人组团龟蛇爬行走红新
            </li>
            <li>
                <span>5</span>
                小型汽车驾驶证取消70岁年龄上限
            </li>
            <li>
                <span>6</span>
                首批iPhone12订单发货了
            </li>
        </ul>
    </div>
</body>

</html>